<div class="modal-header primary">
    <h4 class="modal-title" id="modal-title">
        Import Consumers
        <a  class="modal-close pull-right" ng-click="closeModal()">
            <i class="mdi mdi-close"></i>
        </a>
    </h4>
</div>
<div class="col-md-12 bg-light-grey padding">
    <h5 class="no-margin capitalize">{{adapter.name}}</h5>
    <p data-ng-show="!adapter.info" class="help-block">Define options to the consumer storage.</p>
    <p data-ng-show="adapter.info" class="help-block" data-ng-bind-html="adapter.info"></p>
</div>
<div class="modal-body">

    <form name="connOptionsForm" ng-submit="loadConsumers()">
        <div class="row">
            <div class="col-md-12">
                <h5>Adapter Options</h5>
                <div class="form-group"
                     data-ng-repeat="(key,field) in adapter.form_fields.connection">
                    <div ng-switch on="field.type">
                        <div ng-switch-when="file">
                            <label>{{field.name}}</label>
                            <input type="file"
                                   ng-required="field.required"
                                   ngf-select ng-model="connOptions[key]" name="field.name"
                            />
                        </div>
                        <div ng-switch-when="boolean">
                            <label>{{field.name}}</label><br>
                            <input
                                    bs-switch
                                    ng-model="connOptions[key]"
                                    switch-size="small"
                                    type="checkbox"
                                    switch-on-text="YES"
                                    switch-off-text="NO"
                            >

                        </div>
                        <div ng-switch-default>
                            <input  type="{{field.type}}"
                                    name="{{field.name}}"
                                    ng-required="field.required"
                                    placeholder="{{field.name}} ({{field.required ? 'required' : 'optional'}})"
                                    class="form-control" ng-model="connOptions[key]"/>
                        </div>
                    </div>
                    <div
                            ng-show="connOptionsForm[field.name].$touched"
                            ng-messages="connOptionsForm[field.name].$error">
                        <p class="help-block no-margin" ng-message="required">
                            <span class="text-danger">{{field.name}} is required.</span>
                        </p>
                    </div>
                    <p class="help-block" data-ng-bind-html="field.description"></p>

                </div>
            </div>
            <div class="col-md-12" ng-if="adapter.form_fields.consumer">
                <h5>Consumer Fields</h5>
                <div class="form-group"
                     data-ng-repeat="(key,field) in adapter.form_fields.consumer">
                    <div ng-switch on="field.type">
                        <div ng-switch-when="file">
                            <input type="file"
                                   ng-required="field.required"
                                   ngf-select
                                   ng-model="connOptions[key]" name="field.name"
                            />
                        </div>
                        <div ng-switch-when="boolean">
                            <input
                                    bs-switch
                                    ng-model="connOptions[key]"
                                    switch-size="small"
                                    type="checkbox"
                                    switch-on-text="YES"
                                    switch-off-text="NO"
                            >
                        </div>
                        <div ng-switch-default>
                            <input  type="{{field.type}}"
                                    name="{{field.name}}"
                                    ng-required="field.required"
                                    placeholder="{{field.name}} ({{field.required ? 'required' : 'optional'}})"
                                    class="form-control" ng-model="connOptions[key]"/>

                        </div>
                    </div>
                    <div
                            ng-show="connOptionsForm[field.name].$touched"
                            ng-messages="connOptionsForm[field.name].$error">
                        <p class="help-block no-margin" ng-message="required">
                            <span class="text-danger">{{field.name}} is required.</span>
                        </p>
                    </div>
                    <p class="help-block" data-ng-bind-html="field.description"></p>


                </div>
            </div>
        </div>
        <!--<pre>{{connOptions | json}}</pre>-->
        <div class="modal-footer padding-top">
            <button type="button" data-ng-click="closeModal()" data-ng-disabled="busy" class="btn btn-warning">
                <i class="mdi mdi-close"></i>
                cancel
            </button>
            <button type="submit" data-ng-disabled="busy" class="btn btn-primary">
                <fading-circle-spinner class="spinner spinner-invert pull-left" ng-if="busy"></fading-circle-spinner>
                <i class="mdi mdi-database" ng-if="!busy"></i>
                load consumers
            </button>
        </div>
    </form>
</div>
